今日目標
• 學習建立和切換分支
• 用分支開發新功能而不影響主程式
• 體驗分支合併流程
• 理解為什麼分支是團隊協作的核心
步驟1：查看目前分支狀況

查看所有分支

git branch

查看目前在哪個分支（有 * 號的）

應該顯示 main 或 master

步驟2：建立第一個功能分支

建立並切換到新分支（開發產品頁面）

git checkout -b feature/products-page

確認切換成功

git branch

現在 * 應該在 feature/products-page

步驟3：在新分支開發產品頁面
建立 products.html：

<h1>我們的產品與服務</h1>

<div class="product-grid">
    <div class="product-card">
        <h3>網站開發</h3>
        <p>專業的網站設計與開發服務，打造您的線上品牌形象。</p>
        <ul>
            <li>響應式網頁設計</li>
            <li>電商網站建置</li>
            <li>SEO 優化</li>
        </ul>
    </div>
    
    <div class="product-card">
        <h3>行動應用程式</h3>
        <p>iOS 和 Android 雙平台應用程式開發。</p>
        <ul>
            <li>原生 APP 開發</li>
            <li>跨平台解決方案</li>
            <li>UI/UX 設計</li>
        </ul>
    </div>
    
    <div class="product-card">
        <h3>系統整合</h3>
        <p>企業級系統整合與資料庫管理服務。</p>
        <ul>
            <li>ERP 系統導入</li>
            <li>資料庫設計</li>
            <li>API 串接服務</li>
        </ul>
    </div>
</div>

.product-card {
background-color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.product-card h3 {
color: #007bff;
margin-bottom: 15px;
font-size: 1.5em;
}

.product-card ul {
margin: 15px 0;
padding-left: 20px;
}

.product-card li {
margin: 8px 0;
color: #666;
}
步驟5：在分支中提交更改

查看修改狀態

git status

加入新檔案和修改

git add .

提交到分支

git commit -m "新增產品服務頁面與相關樣式"

查看分支的提交歷史

git log --oneline
步驟6：切換回主分支檢查

切換回 main 分支

git checkout main

檢查檔案（products.html 應該不存在）

ls

應該沒有 products.html

查看 CSS 檔案（應該也沒有產品頁面的樣式）

tail css/css_style.css
步驟7：切換回功能分支繼續開發

切回功能分支

git checkout feature/products-page

確認檔案都在

ls

應該看到 products.html

步驟8：更新其他頁面加入產品連結
更新 index.html 的導航：

合併功能分支

git merge feature/products-page

檢查合併結果

ls

現在應該看到 products.html

git log --oneline

應該看到功能分支的所有提交

步驟11：清理完成的分支

刪除已完成的功能分支

git branch -d feature/products-page

查看剩餘分支

git branch

應該只剩下 main

步驟12：推送到 GitHub

推送更新到 GitHub

git push origin main
重要概念理解
分支工作流程：
main 分支（穩定版）
↓
建立 feature 分支（開發新功能）
↓
在 feature 分支開發、測試
↓
功能完成後合併回 main
↓
刪除 feature 分支
為什麼要用分支？
• ✅ 隔離開發：新功能不會影響穩定版
• ✅ 並行開發：多人可以同時開發不同功能
• ✅ 安全實驗：可以放心嘗試新想法
• ✅ 版本控制：容易追蹤功能開發進度
今日核心指令
git branch # 查看分支
git checkout -b 分支名 # 建立並切換分支
git checkout 分支名 # 切換分支
git merge 分支名 # 合併分支
git branch -d 分支名 # 刪除分支